<script setup>
import {ref} from "vue";
import {post, get} from "@/request/request";
import LoginPopup from "../components/login";
import {onLoad, onShow} from "@dcloudio/uni-app";
import {config} from "@/config";

const popup = ref(null);
const loginPopupComponent = ref(null);
const userInfos = ref({});
const navTop = ref([]);
const items = ref([]);
const carousel = ref({})


const popupData = [
  {
    text: "زاكاسلىرىم",
    icon: '/static/path.svg'
  },
  {
    text: "تەڭشەك",
    icon: '/static/setup.svg'
  },
];

onShow(() => {
  userInfo();
  homeType();
});
const userInfo = () => {
  post("userInfo").then((res) => {
    const {data} = res;
    userInfos.value = data;
  });
};
const homeType = () => {
  post("homeType").then((res) => {
    const {data} = res;
    console.log("homeType", data);
    navTop.value = data.typeList;
    items.value = data.type;
    carousel.value = data.carousel;
  });
};
const open = () => {
  popup.value.open();
};

const searchClick = () => {
  uni.navigateTo({
    url: "/pages/search/search",
  });
};

const topNavClick = (item) => {
  if (uni.getStorageSync("sessionKey")) {
    uni.navigateTo({
      url: "/pages/cate/cate?text=" + item.type_name + "&id=" + item.id + "&classify=" + item.classify,
    });
  } else {
    loginPopupComponent.value.openPopup();
  }

};
const tabNavClick = (item) => {
  if (uni.getStorageSync("sessionKey")) {
    uni.navigateTo({
      url: "/pages/cate/cate?text=" + item.type_name + "&id=" + item.id,
    });
  } else {
    loginPopupComponent.value.openPopup();
  }
};

const loginClick = () => {
  if (!uni.getStorageSync("sessionKey")) {
    loginPopupComponent.value.openPopup();
  } else {
    uni.navigateTo({
      url: "/pages/user/user",
    });
  }
};
const popupItemClick = (index) => {
  if (index === 0) {
    uni.navigateTo({
      url: '/pages/order/order',
    });
  } else if (index === 1) {
    uni.navigateTo({
      url: '/pages/user/setup/setup'
    })
  }
}

//分享
const onShareAppMessage = (res) => {
  if (res.from === "button") {
  }
  return {
    title: "ئەڭ ئىسىل مەھسۇلات بىزدە",
    path: "/pages/home/home",
  };
};

</script>
<template>
  <uv-navbar :fixed="true" :placeholder="true">
    <template v-slot:left>
      <view class="uv-nav-slot" @click="open">
        <image :src="userInfos && userInfos.u_avatar ? userInfos.u_avatar : '/static/avatar.svg'"/>
      </view>
    </template>
  </uv-navbar>
  <view class="home">
    <view class="top-search" @click="searchClick">
      <image src="/static/home/search.svg"/>
      <text>ئىزدىمەكچى بولغان مەھسۇلات نامىنى كىرگۈزۈڭ</text>
    </view>
    <view class="top-nav">
      <template v-for="(item, index) in navTop" :key="index">
        <view class="top-nav-item" :style="{ backgroundColor: item.bgColor, color: item.textColor }"
              @click="topNavClick(item)">{{ item.type_name }}
        </view>
      </template>
    </view>
    <view class="tab-nav">
      <template v-for="(item, index) in items" :key="index">
        <view class="tab-nav-item" @click="tabNavClick(item)">
          <image :src="item.type_image"/>
          <text>{{ item.type_name }}</text>
        </view>
      </template>
    </view>
    <view class="index-image" v-for="(item, index) in carousel" :key="index">
      <image :src="item.ca_image"/>
    </view>
  </view>
  <!-- Popup 弹出层（抽屉） -->
  <uv-popup ref="popup" mode="right" bgColor="#F9F9F9">
    <view class="popup">
      <view class="popup-avatar" @click="loginClick">
        <image :src="userInfos && userInfos.u_avatar ? userInfos.u_avatar : '/static/avatar.svg'"/>
        <text>{{ userInfos && userInfos.u_nickname !== undefined ? userInfos.u_nickname : "تىزىملىتىڭ" }}</text>
        <image class="avatar-img" src="/static/arrow-left.svg"/>
      </view>
      <template v-for="(item, index) in popupData">
        <view class="popup-list" @click="popupItemClick(index)">
          <image :src="item.icon"/>
          <text>{{ item.text }}</text>
          <image src="/static/arrow-left.svg"/>
        </view>
      </template>
      <button open-type="contact" hover-class="none" class="popup-button" @click="CustomerClick">
        <image src="/static/kefu.svg"/>
        <text>مۇلازىمەتچى</text>
        <image src="/static/arrow-left.svg"/>
      </button>
    </view>
  </uv-popup>
  <!--  login弹出层-->
  <login-popup ref="loginPopupComponent"/>
</template>
<style scoped lang="scss">
@mixin flex($direction: row) {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: $direction;
}

.uv-nav-slot {
  @include flex;
  align-items: center;
  justify-content: space-between;
  border-width: 1rpx;
  border-radius: 200rpx;
  border-color: #dadbde;
  padding: 6rpx 14rpx;
  opacity: 0.8;

  image {
    width: 60rpx;
    height: 60rpx;
    border-radius: 9999rpx;
  }
}

.home {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  direction: rtl;

  .top-search {
    margin: 15rpx;
    width: 690rpx;
    height: 96rpx;
    background: #f4f4f4;
    border-radius: 48rpx;
    display: flex;
    align-items: center;

    image {
      margin: 25rpx;
      width: 38rpx;
      height: 38rpx;
    }

    text {
      font-size: 28rpx;
      color: #999999;
    }
  }

  .top-nav {
    margin: 58rpx;
    width: 642rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;


    .top-nav-item {
      width: 182rpx;
      height: 86rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 20rpx;
    }
  }

  .tab-nav {
    display: flex;
    flex-wrap: wrap;
    width: 642rpx;
    height: 526rpx;
    background: #F9F9F9;
    padding: 20rpx;
    box-shadow: 0 0 10rpx #e0e0e0;
    border-radius: 20rpx;

    .tab-nav-item {
      width: 33.33%;
      height: calc(526rpx / 2);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;

      image {
        width: 178rpx;
        height: 178rpx;
      }

      text {
        margin: 10rpx;
        color: #111111;
        font-size: 28rpx;
      }
    }
  }

  .index-image {
    width: 688rpx;
    height: 296rpx;
    border-radius: 20rpx;
    margin-top: 25rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }
}

.popup {
  direction: rtl;
  padding: 15rpx;

  .popup-avatar {
    margin-top: 200rpx;
    height: 106rpx;
    width: 427rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;

    image {
      width: 100rpx;
      height: 100rpx;
      border-radius: 99999rpx;
    }

    text {
      color: #ff9385;
    }

    .avatar-img {
      width: 20px;
      height: 20rpx;
    }
  }

  .popup-list {
    margin-top: 30rpx;
    width: 427rpx;
    height: 76rpx;
    background: #FFF;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 5rpx;
    border-radius: 20rpx;

    image {
      width: 28rpx;
      height: 28rpx;
    }
  }

  .popup-button {
    margin-top: 30rpx;
    padding: 10rpx;
    width: 427rpx;
    height: 76rpx;
    background: #FFF;
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-radius: 20rpx;

    text {
      font-size: 32rpx;
      color: #111111;
    }

    image {
      width: 28rpx;
      height: 28rpx;
    }
  }
}

button::after {
  border: none;
}
</style>
